<template>
	<view class="container">
		<view class="header-top">就近加油</view>
		<view class="search-bar-wrapper">
			<view class="search-bar">
				<input type="text" placeholder="输入需要搜索的内容" class="search-input" />
				<img src="/static/whb/搜索@3x.png" alt="搜索图标" class="search-icon" />
			</view>
			<view class="list-mode-btn" @click="navi">列表模式</view>
		</view>
		<view class="map-section">
			<view class="map-wrapper">
				<map scale="14" :markers="markers" :longitude="longitude" :latitude="latitude" class="map"
					@markertap="handleMarkerTap" @callouttap="handleCalloutTap"
					style="width: 100%; height: calc(100vh - 100rpx);">
				</map>
			</view>

			<!-- 底部卡片 -->
			<view class="bottom-info" v-if="selectedStation">
				<view class="info-left">
					<text class="station-name">{{ selectedStation.name }}</text>
					<text class="station-address">{{ selectedStation.address }}</text>
					<view class="store-detail" @click="goToStoreDetail(selectedStation)">
						<image src="/static/whb/info.png" class="info-icon" />
						<text class="detail-text">门店详情 >></text>
					</view>
				</view>
				<image :src="selectedStation.img" mode="aspectFill" class="station-img" />
			</view>

			<!-- 导航按钮 -->
			<button class="nav-btn" v-if="selectedStation" @click="goToNavigation(selectedStation)">立即导航</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const latitude = ref(34.826128);
	const longitude = ref(113.558902);

	const gasStations = ref([]);
	const markers = ref([]);
	const selectedStation = ref(null);

	onLoad(() => {
		fetchGasStations();
	});

	function fetchGasStations() {
		uni.request({
			url: 'http://localhost:9401/GesStation/list',
			method: 'GET',
			header: {
				'Authorization': uni.getStorageSync('Token')
			},
			success: (res) => {
				if (res.data.code === 200 && res.data.rows) {
					gasStations.value = res.data.rows.map(station => ({
						...station,
						// 确保图片路径正确，如果没有图片则使用默认图片
						img: station.img || '/static/default-station.png'
					}));

					markers.value = gasStations.value
						.filter(station => station.latitude && station.longitude)
						.map(station => ({
							id: Number(station.id), // 确保 id 是数字类型
							latitude: parseFloat(station.latitude),
							longitude: parseFloat(station.longitude),
							width: 25,
							height: 25,
							iconPath: '/static/home/maps/location.png',
							callout: {
								content: station.name,
								color: '#FFFFFF',
								fontSize: 14,
								bgColor: '#007AFF',
								padding: 5,
								display: 'BYCLICK',
								borderRadius: 5
							}
						}));

				} else {
					uni.showToast({
						title: res.data.msg || '获取加油站列表失败',
						icon: 'none'
					});
				}
			},
			fail: (error) => {
				console.error('获取加油站列表网络请求失败:', error);
				uni.showToast({
					title: '网络请求失败，请重试',
					icon: 'none'
				});
			}
		});
	}

	function goToNavigation(station) {
		if (!station) {
			uni.showToast({
				title: '请先选择一个加油站',
				icon: 'none'
			});
			return;
		}
		uni.navigateTo({
			url: `/pages/index/reful/navigation/navigation?id=${station.id}&latitude=${station.latitude}&longitude=${station.longitude}&name=${station.name}&address=${station.address}`
		})
	}

	function navi() {
		uni.navigateTo({
			url: "/pages/index/reful/reful"
		})
	}

	function handleMarkerTap(e) {
		const markerId = Number(e.detail?.markerId || e.markerId);

		if (!markerId || isNaN(markerId)) {
			return;
		}

		const tappedStation = gasStations.value.find(
			station => station.id === markerId
		);

		if (tappedStation) {
			// 创建新对象确保触发响应式更新
			selectedStation.value = {
				...tappedStation,
				// 确保图片字段存在
				img: tappedStation.img || '/static/default-station.png'
			};
		} else {
			console.warn('未找到ID为', markerId, '的加油站');
			console.log('现有加油站ID列表:', gasStations.value.map(s => s.id));
		}
	}


	function handleCalloutTap(e) {
		// Additional logic can be added here, e.g., navigation
	}

	function goToStoreDetail(station) {
		if (!station) {
			uni.showToast({
				title: '请先选择一个加油站',
				icon: 'none'
			});
			return;
		}
		uni.navigateTo({
			url: `/pages/index/reful/store/store?id=${station.id}`
		});
	}
</script>

<style>
	.container {
		height: 200px;
		background: #007aff;
		padding-bottom: 20px;
	}

	.header-top {
		text-align: center;
		color: white;
		padding-top: 10px;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 1px;
	}

	.search-bar-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 15px;
		margin-bottom: 20px;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		flex: 1;
		height: 40px;
		padding: 0 10px;
		border: 1.5px solid #e6e6e6;
	}

	.search-input {
		flex: 1;
		height: 36px;
		border: none;
		outline: none;
		background: transparent;
		font-size: 15px;
	}

	.search-icon {
		width: 22px;
		height: 22px;
		margin-left: 5px;
	}

	.list-mode-btn {
		margin-left: 10px;
		background: #ff9800;
		color: #fff;
		border-radius: 16px;
		padding: 0 16px;
		height: 32px;
		display: flex;
		align-items: center;
		font-size: 15px;
		font-weight: 500;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.map-section {
		margin-top: 20px;
		background: #fff;
		border-radius: 20px 20px 0 0;
		overflow: hidden;
	}

	.map-wrapper {
		width: 100%;
		height: calc(100vh - 180px);
		background: #f5f5f5;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.bottom-info {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 140rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 999;
	}

	.info-left {
		flex: 1;
		margin-right: 20rpx;
	}

	.station-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 400rpx;
	}

	.station-address {
		font-size: 26rpx;
		color: #666;
		display: block;
		margin-bottom: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 400rpx;
	}

	.store-detail {
		display: flex;
		align-items: center;
	}

	.info-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.detail-text {
		font-size: 26rpx;
		color: #999;
	}

	.station-img {
		width: 160rpx;
		height: 120rpx;
		border-radius: 10rpx;
		object-fit: cover;
	}

	.nav-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 40rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #007AFF;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 44rpx;
		text-align: center;
		border: none;
	}
</style>